<template>
  <!-- mlog -->
  <div class="playlist-item-box">
    <div class="playlist-mv-cover" @click="clickMlog(item.id)">
      <a href="javascript:;">
        <img
          class="playlist-mv-pic"
          :src="item.resource.mlogBaseData.coverUrl"
          :alt="item.resource.mlogBaseData.text"
        />
        <i class="mod-cover-mark"></i>
        <i class="mod-cover-icon-play"></i>
      </a>
    </div>
    <h4 class="playlist-title">
      <a
        href="javascript:;"
        class="playlist-title-txt"
        :title="item.resource.mlogBaseData.text"
        @click="clickMlog(item.id)"
      >
        {{ item.resource.mlogBaseData.text }}
      </a>
    </h4>
    <h4 class="playlist-creator" v-if="item.resource">
      by
      <a href="javascript:;" :title="item.resource.userProfile.nickname">
        {{ item.resource.userProfile.nickname }}
      </a>
    </h4>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      vid: "",
    };
  },
  mounted() {},
  methods: {
    clickMlog(id) {
      this.axios({
        url: "/mlog/to/video?id=" + id,
      })
        .then((res) => {
          this.vid = res.data.data;
          this.playVideo(this.vid);
          document.documentElement.scrollTo({ top: 141, behavior: "smooth" });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
</style>